<!-- 主页 -->
<template>
  <view class="content">
    <!-- 自定义加载loading页面 v-if:true显示加载页面 false关闭加载页面 gifSrc:设置gif资源 -->
    <cc-gifLoading v-if="isloading"
      gifSrc="https://cdn.pixabay.com/animation/2023/05/02/04/29/04-29-03-511_512.gif"></cc-gifLoading>
    <div> <!-- 左上角用户小窗组件 -->
      <userAvatarBar></userAvatarBar>
      <text class="user_name" style="position: absolute; left: 20%; top: 8%; font-size: 25px;">Hi，{{userName}}！</text>
    </div>
    <div class="BBS"> <!-- 公告栏 -->
      <div class="image-swiperBox">
        <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
          <swiper-item v-for="(item , index) in imageAll" :key="index" @tap="redirectToExternalLink(item.link)">
            <image :src="item.URL" mode="aspectFill" style="height: 130px; width: 280px;"></image>
          </swiper-item>
        </swiper>
      </div>
      <text class="BBS_words">公告栏</text>
    </div>
    <div class="patitions_buttonArea"> <!-- 分区帖子按钮 -->
      <button class="patitions_button" @click="goToappointment()">
        <div>
          <image class="patitions_icon" src="/static/icon/partitionButton/appointment.jpg" mode="aspectFill">
          </image>
          <text class="appointment_words">约 球</text>
        </div>
      </button>
      <button class="patitions_button" @click="goTotrade()">
        <div>
          <image class="patitions_icon" src="/static/icon/partitionButton/trade.jpg" mode="aspectFill"></image>
          <text class="trade_words">装备交易</text>
        </div>
      </button>
      <button class="patitions_button" @click="goTocoach()">
        <div>
          <image class="patitions_icon" src="/static/icon/partitionButton/coach.jpg" mode="aspectFill">
          </image>
          <text class="coach_words">教练陪练</text>
        </div>
      </button>
      <button class="patitions_button" @click="goTodaily()">
        <div>
          <image class="patitions_icon" src="/static/icon/partitionButton/daily.jpg" mode="aspectFill">
          </image>
          <text class="daily_words">羽球人的日常</text>
        </div>
      </button>
    </div>
    <div> <!-- 热门帖子模块 -->
      <image src="/static/icon/post/hot.png" mode="aspectFill"
        style="height: 50px; width: 50px; position: absolute; left: 12%; top: 75%;"></image>
      <text style="font-size: 30px; position: absolute; left: 28%; top: 76%; color: #9a1403;">最新/热门帖</text>
      
      <!-- 日常热门帖 -->
      <div style="margin-top: 5%;" @click="goTodailyPostDetail()">
        <div class="dailyPost_List">
          <!-- 帖子用户头像名称 -->
          <div style="display: inline;">
            <button class="otheruser-icon" plain="true"
              @click="() => goToOwnSpace(postList4[0].userId, postList4[0].userName, postList4[0].iconUrl)">
              <image :src="otheruserIcon4[0]" mode="aspectFill"
                style="height: 60px; width: 60px;  border-radius: 100%;">
              </image>
            </button>
            <text
              style="font-size: 15px; color: black; margin-top: 5%; position: absolute; top: 0%; left: 10%;">{{postList4[0].userName}}</text>
          </div>
          <!-- 帖子具体内容 -->
          <div>
            <!-- 右上角 -->
            <div class="dailyText1">
              <text>类型：{{dailyType[postList4[0].type]}}</text>
            </div>
            <!-- 内容 -->
            <div class="dailyText2">
              <text>{{postList4[0].content}}</text>
            </div>
            <div class="dailyText3">
              <text>发布时间：{{postcreatTime4[0]}}</text>
            </div>
            <div>
              <button class="dailyLike_Button" plain="true">
                <image src="/static/icon/post/like1.png" mode="aspectFill" style="height: 20px; width: 20px; ">
                </image>
              </button>
              <text class="dailyLike_Amount">{{postList4[0].likes}}</text>
            </div>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
  import userAvatarBar from '@/components/userAvatarBar/userAvatarBar.vue'

  import {
    getTime
  } from '@/utils/getTime/index.js'
  import {
    bucketUrl
  } from '@/config/baseUrl'

  // 引入请求方法
  import {
    reqGetAppointPostList
  } from '@/api/partition/appointPost'
  import {
    reqGetHotBlog
  } from '@/api/main/home/index.js'

  export default {
    components: {
      userAvatarBar //左上角用户小窗组件
    },
    data() {
      return {
        tarId: '',
        tarName: '',
        chooseAvatar: '',
        imageAll: [ //轮播图
          {
            //羽协招新
            URL: '/static/icon/BBS/BBS_1.png',
            link: 'https://mp.weixin.qq.com/s/gU6bTU8bkQ77lLcycMh_Kw'
          },
          {
            //羽协会员大会
            URL: '/static/icon/BBS/BBS_2.png',
            link: 'https://mp.weixin.qq.com/s/dWV9eUfL9mCZy8mRXhAqRw'
          },
          {
            //数信院队招新
            URL: '/static/icon/BBS/BBS_3.png',
            link: 'https://mp.weixin.qq.com/s/3dOFAeiy3Hggv9y40XkUQw'
          },
          {
            //单打赛对阵表
            URL: '/static/icon/BBS/BBS_4.png',
            link: 'https://mp.weixin.qq.com/s/bTZG2NDmIG7koe5i2yw3Wg'
          }
        ],
        userName: wx.getStorageSync('nickName'),
        postList1: [], //约球热门帖
        postList2: [], //交易热门帖
        postList3: [], //陪教热门帖
        postList4: [], //日常热门帖
        appointmentType: ['男单', '男双', '女单', '女双', '混双'],
        coachType: ['找教练', '找陪练'],
        dailyType: ['日常分享', '技能提升', '吐槽'],
        tradeType: ['球拍', '装备', '羽毛球'],
        otheruserIcon1: [], //装热帖用户头像
        otheruserIcon2: [],
        otheruserIcon3: [],
        otheruserIcon4: [],
        postcreatTime1: [], //装热帖创建时间
        postcreatTime2: [],
        postcreatTime3: [],
        postcreatTime4: [],
        isloading: true
      }
    },
    onLoad() {
      this.getDailyHotPost()
      this.isloading = false;
    },
    onPullDownRefresh() { //刷新页面
      this.postList1 = [];
      this.postList2 = [];
      this.postList3 = [];
      this.postList4 = [];
      this.otheruserIcon1 = [];
      this.otheruserIcon2 = [];
      this.otheruserIcon3 = [];
      this.otheruserIcon4 = [];
      this.postcreatTime1 = [];
      this.postcreatTime2 = [];
      this.postcreatTime3 = [];
      this.postcreatTime4 = [];
      this.getDailyHotPost()
      uni.stopPullDownRefresh();
    },
    methods: {
      redirectToExternalLink(link) { //跳转公告栏推文
        wx.navigateTo({
          url: '/pages/webview/webview?url=' + encodeURIComponent(link),
          success: function(res) {
            console.log('跳转成功');
          },
          fail: function(err) {
            console.error('跳转失败', err);
          }
        });
      },
      goToappointment() {
        uni.navigateTo({
          url: '/pages/partition/appointmentPatition'
        })
      },
      goTotrade() {
        uni.navigateTo({
          url: '/pages/partition/tradePostarea'
        })
      },
      goTocoach() {
        uni.navigateTo({
          url: '/pages/partition/coachPostarea'
        })
      },
      goTodaily() {
        uni.navigateTo({
          url: '/pages/partition/dailyPostarea'
        })
      },

      //转换时间戳
      shiftTime(time) {
        return getTime(time);
      },

      // 获取陪教日常帖
      async getDailyHotPost() {
        let result = await reqGetHotBlog(0)
        if (result.success) {
          this.postList4.push(result.data) //将帖子保存进postList[0]
          this.otheruserIcon4.push(bucketUrl + this.postList4[
            0].iconUrl);
          this.postcreatTime4.push(this.shiftTime(this.postList4[0].createTime));
        }
      },

      goTotradePostDetail() { //进入交易帖子细节
        getApp().globalData.postDetail = []; //先清空
        getApp().globalData.postDetail.push(this.postList2[0]); //将当前帖子内容保存进全局变量postDetail数组里
        uni.navigateTo({
          url: '/pages/postDetail/tradePostDetail'
        })
      },
      goTodailyPostDetail() { //进入日常帖子细节
        getApp().globalData.postDetail = []; //先清空
        getApp().globalData.postDetail.push(this.postList4[0]); //将当前帖子内容保存进全局变量postDetail数组里
        uni.navigateTo({
          url: '/pages/postDetail/dailyPostDetail'
        })
      },

      goToOwnSpace(tarId, tarName, chooseAvatar) {
        getApp().globalData.chooseTarId = tarId;
        getApp().globalData.chooseTarName = tarName;
        getApp().globalData.chooseAvatar = bucketUrl +
          chooseAvatar;
        uni.navigateTo({
          url: '/pagesA/ownspace/user-space'
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  @import url("../../static/css/postStyle.scss");

  .content {
    background-image: url();
    /* 图片素材background_1.jpg */
    background-size: cover;
    background-attachment: fixed; //背景图片随页面滚动
    height: 235vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    /* 从上到下 */
    align-items: center;
    /* 水平居中 */
  }

  .BBS {
    margin-top: 25%;
    position: relative;
    background-color: #4b4b4b;
    border-radius: 15px;
    height: 200px;
    width: 300px;
    border: 1px solid #bbbbbb;
    text-align: center;

    .image-swiperBox {
      width: 100%;
      height: 100%;

      /* 轮播 */
      .swiper {
        position: absolute;
        top: 10px;
        left: 10px;
        height: 130px;
        width: 280px;
        border: 1px solid #bbbbbb;
      }
    }

    .BBS_words {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 2%;
      color: #FFBF6B;
      font-size: 35px;
    }
  }

  @mixin partition_wordsStyle() {
    position: absolute;
    right: 3%;
    margin: 0 auto;
    writing-mode: vertical-lr;
    color: #FFBF6B;
    font-size: 22px;
    line-height: 27px;
  }

  .patitions_buttonArea {
    position: relative;
    left: 9%;
    margin-top: 5px;

    .patitions_button {
      position: relative;
      background-color: #4b4b4b;
      border-radius: 10px;
      margin-bottom: 5px;
      margin-left: 3%;
      height: 85px;
      width: 140px;
      border: 1px solid #bbbbbb;
      display: inline-block;

      .patitions_icon {
        position: absolute;
        top: 4%;
        left: 2%;
        height: 75px;
        width: 75px;
        border-radius: 10%;
      }

      .appointment_words {
        @include partition_wordsStyle();
        right: 15%;
        top: 12%;
        font-size: 26px;
        line-height: 20px;
      }

      .trade_words,
      .coach_words {
        @include partition_wordsStyle();
        top: 8%;
        letter-spacing: 8px;
      }

      .daily_words {
        @include partition_wordsStyle();
        top: 3%;
        font-size: 18px;
        line-height: 27px;
        letter-spacing: 8px;
      }
    }
  }
</style>